<template>
  <view class="card tn-padding-sm tn-margin-sm">
<!--    -->
    <kanyanbiluPdf style="position: absolute;top: -999999px" ref="PDF" :jsonData="jsonData" @upload="imgUpload"></kanyanbiluPdf>

    <inputForm v-model="form" ref="form" :list="list">
      <template #result>
        <view>
          <view style="font-weight: bold">勘验（检查）情况及结果:</view>
          <view class="tn-flex tn-flex-col-center">
            <tn-input v-model="form.a" type="textarea" border/>
            <view class="tn-margin-left-sm">
              <tn-button @click="showPopup = true" background-color="tn-bg-blue" fontColor="tn-color-white">选项
              </tn-button>
            </view>
          </view>
          {{ form.b }}
          <tn-input v-model="form.c" type="input" border/>
          {{ form.d }}
          <tn-input v-model="form.e" type="textarea" border/>
        </view>
      </template>
    </inputForm>
    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
      </tn-button>
    </view>

    <tn-popup v-model="showPopup" title="提示" confirmText="确定" cancelText="取消" @confirm="reset" mode="bottom"
              length="60%">
      <view class="tn-padding-sm">
        <tn-radio-group v-model="form.a" wrap class="tn-margin-sm" @change="showPopup = false">
          <tn-radio class="card tn-padding-sm tn-margin-bottom-sm" v-for="(item, index) in kanyanbiluJson" :key="index"
                    :name="item.label">
            <view>{{ item.label }}</view>
          </tn-radio>
        </tn-radio-group>

      </view>

    </tn-popup>

    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">勘验笔录</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('勘验笔录')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>

  </view>
</template>

<script>
import inputForm from "@/components/inputForm.vue";
import {addRecNote, addSign, getRecNote, getSign, resetRecNote, updateSign} from "@/api/lupeiwenshu";
import TnInput from "@/tuniao-ui/components/tn-input/tn-input.vue";
import {kanyanbiluJson} from "@/pages/roadCompensation/mock/mockJson";
import fujianmixins from "../js/fujianmixins";
import kanyanbiluPdf from "@/pages/roadCompensation/kanyanbilu/kanyanbiluPdf.vue";
import {toast} from "@/utils/common";

export default {
  components: {kanyanbiluPdf, TnInput, inputForm},
  mixins: [fujianmixins],
  data() {
    return {
      signList: [],
      kanyanbiluJson,
      showPopup: false,
      form: {
        a: "",
        "b": "",
        "c": "",
        "d": "",
        "e": "",

        "caseInfo": "",
        "inviteName": "",
        "inviteCom": "",
        "inviteAddr": "",
        "inviteTel": "",
        "remark": "",
        "docId": '',
        "id": "",
        "result": "",

        kyblSign1: "",
        kyblSign2: "",
        kyblSign3: "",
        kyblSign4: "",
      },
      list: [
        {
          label: "案号：",
          prop: "caseInfo",
          // labelWidth: 120,
        },
        {
          label: "",
          prop: "result",
          type: "slot",
        },
        {
          label: "当事人或其代理人签名：",
          prop: "kyblSign1",
          type: "signBoard",
          fn: (item) => {
            this.form.kyblSign1 = item;
          },
        },
        {
          label: "被邀请人签名：",
          prop: "kyblSign2",
          type: "signBoard",
          fn: (item) => {
            this.form.kyblSign2 = item;
          },
        },
        {
          label: "勘验（检查）人签名：",
          prop: "kyblSign3",
          type: "signBoard",
          fn: (item) => {
            this.form.kyblSign3 = item;
          },
        },
        {
          label: "记录人签名：",
          prop: "kyblSign4",
          type: "signBoard",
          fn: (item) => {
            this.form.kyblSign4 = item;
          },
          // labelWidth: 230,
        },
        {
          label: "被邀见证人：",
          prop: "inviteName",
          // labelWidth: 230,
        },
        {
          label: "被邀见证人单位或职业：",
          prop: "inviteCom",
          // labelWidth: 230,
        },
        {
          label: "被邀见证人住址：",
          prop: "inviteAddr",
          // labelWidth: 280,
        },
        {
          label: "被邀见证人联系方式：",
          prop: "inviteTel",
          // labelWidth: 200,
        },
        {
          label: "备注：",
          prop: "remark",
        },

      ]
    };
  },
  methods: {
    init() {
      getRecNote({docId: this.$route.query.id}).then((res) => {
        const result = res.data.recoNote;
        if (result) {
          this.form.caseInfo = result.caseInfo;

          this.form.inviteName = result.inviteName ? result.inviteName : '/';
          this.form.inviteCom = result.inviteCom ? result.inviteCom : '/';
          this.form.inviteAddr = result.inviteAddr ? result.inviteAddr : '/';
          this.form.inviteTel = result.inviteTel ? result.inviteTel : '/';
          this.form.remark = result.remark ? result.remark : '/';
          this.form.id = result.id;

          if (result?.result) {
            const sList = result.result.split("#");
            this.form.a = sList[0];
            this.form.b = sList[1];
            this.form.c = sList[2];
            this.form.d = sList[3];
            this.form.e = sList[4];
          }
          this.jsonData = {...res.data,...this.form};
          console.log(this.jsonData)
        }
      })

      this.getSign()

    },
    submit() {

      if (this.$route.query.id) {
        addRecNote({
          caseInfo:this.form.caseInfo,
          inviteAddr:this.form.inviteAddr,
          inviteCom:this.form.inviteCom,
          inviteName:this.form.inviteName,
          inviteTel:this.form.inviteTel,
          remark:this.form.remark,
          result: this.form.a + "#" + this.form.b + "#" + this.form.c + "#" + this.form.d + "#" + this.form.e,
          docId: this.$route.query.id,
          id: this.form.id,
        }).then((res) => {
          toast(res.msg)
		  
          if (this.signList.length) {
            updateSign({
              doc_photo_id: this.$route.query.id,
              type_num: 2,
               interlocutor1: this.form.kyblSign1,
               interlocutor2: this.form.kyblSign2,
               interlocutor3: this.form.kyblSign3,
               interlocutor4: this.form.kyblSign4,
            }).then(res => {
              console.log('res', res)

            })
          } else {
            addSign({
              doc_photo_id: this.$route.query.id,
              type_num: 2,
              interlocutor1: this.form.kyblSign1,
              interlocutor2: this.form.kyblSign2,
              interlocutor3: this.form.kyblSign3,
              interlocutor4: this.form.kyblSign4,
            }).then(res => {
              console.log('res', res)
            })
          }

          if (this.form.kyblSign1) {
			  setTimeout(()=>{
				  this.$refs.PDF.cusRenderDomNoCodeImg()
			  },500)
          } else {
            setTimeout(() => {
              uni.navigateBack();
            }, 1500)
          }
        });
      } else {
        console.log('无ID')
      }
    },
    getSign() {
      getSign({
        doc_photo_id: this.$route.query.id,
        type_num: 2
      }).then(res => {
        if (res.code === 200) {
          this.signList = res.data
          if (res.data.length) {
            this.form.kyblSign1 = this.jsonData.kyblSign1 = res.data[0].interlocutor1
            this.form.kyblSign2 =this.jsonData.kyblSign2 = res.data[0].interlocutor2
            this.form.kyblSign3 =this.jsonData.kyblSign3 = res.data[0].interlocutor3
            this.form.kyblSign4 =this.jsonData.kyblSign4 = res.data[0].interlocutor4
          }

        } else {
          toast(res.msg)
        }
      })
    },
  },
  mounted() {
    this.init();
  },
}
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}
</style>
